<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="详情" closable>
            <n-spin :show="loading">
                <n-space vertical :size="32" v-if="inv.id">
                    <n-descriptions label-placement="left" title="基本信息" bordered :column="1">
                        <n-descriptions-item :label-style="labelStyle" label="开票ID">
                            <n-text code>{{ inv.id }}</n-text>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="开票金额">{{ Filters.money(inv.amount) }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="申请时间">{{ inv.apply }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="开票状态">
                            <n-text v-if="inv.state == 1">门店处理中</n-text>
                            <n-text v-if="inv.state == 2">已委托代开</n-text>
                            <n-text v-if="inv.state == 3">已完成开票</n-text>
                        </n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="发票类型">{{ inv.invoice.type == 1 ? '增值税普通发票' : '增值税专用发票' }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="抬头类型">{{ inv.invoice.person ? '个人' : '单位' }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="抬头名称">{{ inv.invoice.name }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="公司税号" v-if="!inv.invoice.person">{{ inv.invoice.taxno }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="开户行" v-if="!inv.invoice.person">{{ inv.invoice.bank }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="银行账户" v-if="!inv.invoice.person">{{ inv.invoice.card }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="注册地址" v-if="!inv.invoice.person">{{ inv.invoice.addr }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="联系电话" v-if="!inv.invoice.person">{{ inv.invoice.phone }}</n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="邮寄信息" bordered :column="1">
                        <n-descriptions-item :label-style="labelStyle" label="邮寄类型">{{ inv.invoice.ele ? '电子发票' : '纸质发票' }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="邮箱地址" v-if="inv.invoice.ele">{{ inv.invoice.email }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="邮寄地址" v-if="!inv.invoice.ele">{{ inv.invoice.post }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="快递名称" v-if="!inv.invoice.ele && inv.exp.name">{{ inv.exp.name }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="快递单号" v-if="!inv.invoice.ele && inv.exp.sno">{{ inv.exp.sno }}</n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="门店信息" bordered :column="1">
                        <n-descriptions-item :label-style="labelStyle" label="门店编号">S{{ inv.merchant.id }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="门店名称">{{ inv.merchant.name }}</n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="委托信息" bordered :column="1" v-if="inv.entrust.name">
                        <n-descriptions-item :label-style="labelStyle" label="委托时间">{{ inv.entrust.time }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="委托店员">{{ inv.entrust.name }}</n-descriptions-item>
                    </n-descriptions>

                    <n-descriptions label-placement="left" title="订单信息" bordered :column="1">
                        <n-descriptions-item :label-style="labelStyle" label="订单编号">D{{ inv.order.id }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="客户信息">{{ inv.order.customer.phone }} / {{ inv.order.customer.name }}</n-descriptions-item>
                        <n-descriptions-item :label-style="labelStyle" label="车辆信息">{{ inv.order.car.id }} / {{ inv.order.car.cno }} / {{ inv.order.car.name }}</n-descriptions-item>
                    </n-descriptions>
                </n-space>
            </n-spin>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { CloseRound } from '@vicons/material'
import { useStore } from '@/store'
import { Http } from '@/libs'
import { Filters } from '@/libs'

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 720))
const loading = computed(() => store.state.loading.flag)

const labelStyle = {
    width: '150px',
}

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const inv = ref<any>({})

const execLoad = () => {
    Http.post('/ops/fin/invoice/detail', { id: prop.item.id }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        inv.value = resp.data
    })
}

onMounted(() => {
    execLoad()
})
</script>
